<template>
  <div class="chartAttr">
    <div class="dataConfig" v-for="(item, idx) in dataAttr.value.countData" :key="idx">
      <div class="itemBox">
        <div class="item">
          <div class="label">名称：</div>
          <div class="value">
            <el-input v-model="item.label" clearable></el-input>
          </div>
        </div>
        <div class="item">
          <div class="label">数值：</div>
          <div class="value">
            <el-input v-model="item.value" clearable></el-input>
          </div>
        </div>
        <div class="item">
          <div class="label">单位：</div>
          <div class="value">
            <el-input v-model="item.unit" clearable></el-input>
          </div>
        </div>
        <i v-if="idx == 0 && dataAttr.value.countData.length < 5" class="el-icon-circle-plus add" @click="addData(idx)"></i>
        <i v-else class="el-icon-remove del" @click="reduceData(idx)"></i>
      </div>
      <div class="itemBox">
        <div class="label">图片：</div>
        <div class="value">
          <Upload v-if="dataAttr.value.bgImg == ''" :params="params" @fileList="getImgList"></Upload>
          <Upload v-else :params="params1" @fileList="getImgList"></Upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//图片上传
import Upload from '@/commont/plugins/uploadImg.vue';
export default {
  components: { Upload },
  props: ['attrData'],
  computed: {},
  data() {
    return {
      dataAttr: this.attrData,
      idx: 0,
      params: {
        type: 'btn',
        btnName: '上传',
        url: 'https://jsonplaceholder.typicode.com/posts/',
      },
      params1: {
        type: 'btn',
        url: 'https://jsonplaceholder.typicode.com/posts/',
        btnName: '修改',
      },
    }
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    // 增加新闻
    addData(idx) {
      this.idx = idx;
      this.dataAttr.value.countData.push({ label: '', value: '', unit: '', img: '' });
    },
    // 减少新闻
    reduceData(idx) {
      this.dataAttr.value.countData.splice(idx, 1);
    },
    // 上传图片
    getImgList(data) {
      this.dataAttr.value.countData[this.idx].img = data.fileByteUrl;
    }
  },
}
</script>

<style lang="less" scoped>
.chartAttr {
  width: 100%;
  height: 100%;
  margin: 10px 0px;

  .dataConfig {
    border-bottom: 1px dashed #dbdbdb;
  }

  .itemBox {
    display: flex;
    align-items: center;
    padding: 10px;

    .item {
      margin-right: 8px;
    }
  }

  .add {
    margin: 0 10px;
    color: #5CB6FF;
    font-size: 24px;
  }

  .del {
    margin: 0 10px;
    color: #F56C6C;
    font-size: 24px;
  }
}
</style>